<template>
  <div class="info">
    <el-row>
      <el-col :span="3">
        <el-icon>
          <CircleCheck/>
        </el-icon>
      </el-col>
      <el-col :span="16" style="height: 104px">
        <div style="line-height: 52px">
          订单提交成功去付款喽~~
        </div>
        <div style="line-height: 52px">请在内完成支付，超时后将取消订单</div>
      </el-col>
      <el-col :span="5" style="height:104px;line-height: 104px; text-align: right">
        应付金额:<span class="total">￥{{ total.toFixed(2) }}</span>
      </el-col>
    </el-row>
    <div>
      <el-collapse>
        <el-collapse-item name="1" title="订单详情">
          <el-row>
            <el-col :span="2">订单号</el-col>
            <el-col :span="10">{{ order.id }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="2">收货信息:</el-col>
            <el-col :span="10">{{ order.addrDetail }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="2">商品名称:</el-col>
            <el-col :span="10">
              <div v-for="(orderDetail,index) in order.orderDetailList" :key="index">
                {{ orderDetail.goods.name }} {{ orderDetail.goods.color }} {{ orderDetail.goods.version }}
              </div>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
  <div class="pay">
    <div>
      <div class="title">支付工具</div>
      <ul>
        <li>余额支付</li>
        <li>支付宝支付</li>
        <li>微信支付</li>
        <li>银行卡支付</li>
      </ul>
    </div>
    <div>
      <el-input v-model="payPwd" placeholder="请输入支付密码" style="margin: 10px 10px;width: 200px"
                type="password"></el-input>
      <el-button size="large" type="danger" @click="pay">支付</el-button>
    </div>
  </div>
</template>

<script setup>
//根据订单ID查询相关信息 地址 商品
import {useRoute} from "vue-router"
import {useRouter} from "vue-router"
import orderApi from "@/api/orderApi.js";
import {ElMessage} from "element-plus";
import {ref} from "vue";
import {CircleCheck} from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();
//保存订单信息
const order = ref({})
//总金额
const total = ref(0)
//支付密码
const payPwd = ref("");

//支付
function pay() {
  orderApi.pay({
    orderId: route.query.orderId,
    payPwd: payPwd.value
  }).then(resp => {
    if (resp.code == 10000) {
      //跳转到用户订单详情页
      router.push("/")
    } else {
      ElMessage.error(resp.msg)
    }
  })
}

//根据订单id查询相关信息
function getOrder() {
  const orderId = route.query.orderId
  //根据订单查询
  orderApi.selectById1(orderId)
      .then(resp => {
        if (resp.code == 10000) {
          order.value = resp.data;
          console.log(order)
          for (let orderDetail of order.value.orderDetailList) {
            total.value += orderDetail.count * orderDetail.price;
          }
        } else {
          ElMessage.error(resp.msg);
        }
      })
}

getOrder();
</script>

<style scoped>
.info {
  margin-top: 30px;
  background-color: #FFF;
  padding: 30px;
}

.info .el-icon {
  font-size: 100px;
  color: rgb(131, 196, 78);
}

.info .total {
  font-weight: bold;
  font-size: 18px;
  color: var(--theme-color);
}

.pay ul li {
  margin: 10px 15px;
  padding: 0px 10px;
  float: left;
  border: 2px solid #AAA;
  height: 40px;
  line-height: 40px;
}
</style>